<template>
    <div>
        <el-row :gutter="20" class="mgb20">
            <el-col v-for="(licence, index) in licences" :key="index" :span="6" @click="showLicenceInfo(licence)">
                <el-card shadow="hover" body-class="card-body">
                    <div :class="['card-icon1', getBgcolor()]">
                        <el-icon>
                            <User />
                        </el-icon>
                        <p>{{ licence.licenceType }}驾驶证</p>
                    </div>
                    <div class="card-content">
                        <countup class="card-num color1" :end="licence.licenceMoney" />
                        <div>
                            报名费用
                        </div>
                    </div>
                </el-card>
                <br>
            </el-col>
        </el-row>
        <w-dialog v-model="dialog.show" :fullscreen="dialog.fullscreen" :width="dialog.width"
            :persistent="dialog.persistent" :persistent-no-animation="dialog.persistentNoAnimation"
            title-class="primary-light1--bg white">
            <template #title>
                <el-icon>
                    <InfoFilled />
                </el-icon>
                {{ dialog.title }}
            </template>
            <w-card>
                <p class="content">{{ dialog.content }}</p>
            </w-card>
            <template #actions>
                <div class="spacer" />
                <w-button @click="dialog.show = false">关闭</w-button>
            </template>
        </w-dialog>
        <el-row :gutter="20" class="mgb20">
            <el-col :span="12">
                <el-card class="mgb20" shadow="hover">
                    <template #header>
                        <div class="content-title">各驾驶证报考人数</div>
                    </template>
                    <v-chart class="schart" :option="ringOptions" />
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="mgb20" shadow="hover">
                    <template #header>
                        <div class="content-title">驾校报考人数趋势</div>
                    </template>
                    <v-chart class="schart" :option="lineOptions" />
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts" name="dashboard">
import countup from '@/components/countup.vue';
import { use, registerMap } from 'echarts/core';
import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts';
import {
    GridComponent,
    TooltipComponent,
    LegendComponent,
    TitleComponent,
    VisualMapComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';
import chinaMap from '@/utils/china';

import * as studentApi from '@/api/student';
import * as licenceApi from '@/api/licence';
import * as processApi from '@/api/process';
import * as examApi from '@/api/exam';
import { ref } from 'vue';
use([
    CanvasRenderer,
    BarChart,
    GridComponent,
    LineChart,
    PieChart,
    TooltipComponent,
    LegendComponent,
    TitleComponent,
    VisualMapComponent,
    MapChart,
]);
registerMap('china', chinaMap);


const dialog = ref({
    show: false,
    fullscreen: false,
    persistent: false,
    persistentNoAnimation: false,
    width: 500,
    title: '',
    content: '',
})

//驾驶证相关
const licences = ref();
const getLicenceInfo = async () => {
    const response = await licenceApi.getAllLicence();
    licences.value = response.data.data.getAllLicence;
}
const showLicenceInfo = (licence) => {
    dialog.value.show = true;
    dialog.value.title = licence.licenceType + '驾驶证报考注意事项';
    dialog.value.content = licence.licenceText;
}
const getBgcolor = () => {
    return 'bg' + (Math.floor(Math.random() * 8) + 1);
}

//初始化
const role = localStorage.getItem('vuems_name');
const lineOptions = ref();
const ringOptions = ref();
const initChart = () =>{
lineOptions.value = {
    tooltip: {
        trigger: 'axis',
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024'],
    },
    yAxis: {
        type: 'value',
    },
    color: ['#009688', '#f44336'],
    series: [
        {
            name: '毕业人数',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            smooth: true,
            data: [12, 13, 11, 14, 9, 23, 21],
        },
        {
            name: '报名人数',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            smooth: true,
            data: [22, 18, 19, 23, 29, 33, 31],
        },
    ],
};

ringOptions.value = {
    tooltip: {
        trigger: 'item',
    },
    legend: {
        top: '5%',
        left: 'center',
    },

    series: [
        {
            name: '驾驶证报考人数',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
            },
            label: {
                show: false,
                position: 'center',
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold',
                },
            },
            labelLine: {
                show: false,
            },
            data: [
                { value: 1, name: 'A1' },
                { value: 1, name: 'A2' },
                { value: 1, name: 'B1' },
                { value: 17, name: 'C1' },
                { value: 4, name: 'C2' },
                { value: 2, name: 'D1' },
                { value: 1, name: 'D2' },
                { value: 2, name: 'E' },
                { value: 2, name: 'F' },
            ],
        },
    ],
};
}
const init = () => {
    console.log(role);
    console.log(localStorage.getItem("studnetAccountId"));
    console.log(JSON.parse(localStorage.getItem('studentInfo')).studentId);
    getLicenceInfo();
    initChart();
    let keys = Object.keys(localStorage);
    for (let i = 0; i < keys.length; i++) {
        console.log(`Key: ${keys[i]}, Value: ${localStorage.getItem(keys[i])}`);
    }
}
init();
</script>

<style>
.card-body {
    display: flex;
    align-items: center;
    height: 100px;
    padding: 0;
}
</style>
<style scoped>
.card-content {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
    padding: 0 20px;
}

.card-num {
    font-size: 30px;
}

.card-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.bg1 {
    background: #2d8cf0;
}

.bg2 {
    background: #64d572;
}

.bg3 {
    background: #f25e43;
}

.bg4 {
    background: #e9a745;
}

.color1 {
    color: #2d8cf0;
}

.color2 {
    color: #64d572;
}

.color3 {
    color: #f25e43;
}

.color4 {
    color: #e9a745;
}

.chart {
    width: 100%;
    height: 400px;
}

.card-header {
    padding-left: 10px;
    margin-bottom: 20px;
}

.card-header-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.card-header-desc {
    font-size: 14px;
    color: #999;
}

.timeline-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #000;
}

.timeline-time,
.timeline-desc {
    font-size: 12px;
    color: #787878;
}

.rank-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.rank-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f2f2f2;
    text-align: center;
    line-height: 40px;
    margin-right: 10px;
}

.rank-item-content {
    flex: 1;
}

.rank-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #343434;
    margin-bottom: 10px;
}

.rank-item-desc {
    font-size: 14px;
    color: #999;
}

.map-chart {
    width: 100%;
    height: 350px;
}

.bg1 {
    background: #2d8cf0;
}

.bg2 {
    background: #64d572;
}

.bg3 {
    background: #f25e43;
}

.bg4 {
    background: #e9a745;
}

.bg5 {
    background: #FF2400;
    /* 猩红色 */
}

.bg6 {
    background: #0047AB;
    /* 钴蓝色 */
}

.bg7 {
    background: #800080;
    /* 紫色 */
}

.bg8 {
    background: #E62020;
    /* 激情红 */
}


.card-icon1 {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-icon1 .el-icon {
    font-size: 40px;
    color: #fff;
}

.card-icon1 p {
    margin-top: 10px;
    font-size: 14px;
    color: #fff;
}

.content {
    white-space: pre-wrap;
    /* CSS3 */
    white-space: -moz-pre-wrap;
    /* Firefox */
    white-space: -pre-wrap;
    /* Opera <7 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* IE */
}
.schart {
    width: 100%;
    height: 400px;
}
</style>
